<template>
  <div class="m-page-header">
    <a-page-header class="m-page-header--main no-footer">
      <template #title>
        <a-breadcrumb class="m-page-header--breadcrumb" separator="">
          <template v-for="(item, idx) in routes">
            <a-breadcrumb-item>
              <router-link :to="{ path: item.path, params: item.params || {} }">
                <span v-if="idx === 0" style="font-weight: 600; color: #212325; ">
                  {{ item.breadcrumbName }}
                </span>
                <span v-else-if="item.link === true" style="font-weight: 400; color: #4075E5; text-decoration: underline;">
                  {{ item.breadcrumbName }}
                </span>
                <span v-else style="color: #6C727F;">
                  {{ item.breadcrumbName }}
                </span>
              </router-link>
            </a-breadcrumb-item>
            <a-breadcrumb-separator v-if="idx === 0">|</a-breadcrumb-separator>
            <a-breadcrumb-separator v-else-if="item.link === true">
              <svg-icon class="anticon" icon-class="arrow_right"/>
            </a-breadcrumb-separator>
          </template>
          <!-- <template #itemRender="{ route, params }">
            <span v-if="route.path === $route.path || route.path === null" style="color: #6C727F;">
              {{ route.breadcrumbName }}
            </span>
            <router-link v-else :to="{ path: route.path || '/',params: params}">
              <span v-if="route.link === true" style="font-weight: 400 !important; color: #4075E5; text-decoration: underline;">
                {{ route.breadcrumbName }}
              </span>
              <span v-else style="font-weight: 600 !important; color: #212325 !important; ">{{ route.breadcrumbName }}</span>
              <a-breadcrumb-separator />
            </router-link>
          </template> -->
        </a-breadcrumb>
      </template>
      <template #extra>
        <slot name="extra"></slot>
      </template>
    </a-page-header>
  </div>
  <!-- <div class="m-page-header">
    <a-page-header :class="initHeaderClass" :sub-title="subTitle">
      <template #title>
        <a-breadcrumb class="m-page-header--breadcrumb" separator="|" :routes="routes">
          <template #itemRender="{ route, params }">
            <span v-if="route.path === $route.path || route.path === null">
              {{ defaultTitle }}
            </span>
            <router-link v-else :to="{ path: route.path || '/',params: params}">
              {{ route.breadcrumbName + '-2' }}
            </router-link>
          </template>
        </a-breadcrumb>
      </template>
      <template #extra>
        <slot name="extra"></slot>
      </template>
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </a-page-header>
  </div> -->
</template>

<script lang="ts">
  import { defineComponent, getCurrentInstance } from 'vue'
  // import router from '@/router'
  import { useRoute, useRouter } from 'vue-router'
  export default defineComponent({
    name: 'page-header',
    props: {
      title: String,
      subTitle: String,
      breadcrumbPush: {
        type: [Object],
        default() {
          return []
        }
      }
    },
    setup(props: any) {
      const route = useRoute()
      const _tag = route.matched.map(item => {
        return {
          path: item.path,
          breadcrumbName: item.meta.title,
          link: item.link || false,
          params: item.params || {}
        }
      })
      if (props.breadcrumbPush.length > 0) {
        _tag.splice(1,0, props.breadcrumbPush)
      }
      return {
        routes: _tag.flat(Infinity)
      }
    },
    // watch: {
    //   $route: {
    //     handler() {
    //       this.initRoutes()
    //     },
    //     immediate: true
    //   }
    // },
    // computed: {
    //   initHeaderClass() {
    //     return {
    //       'no-footer': true
    //     }
    //   }
    // },
    // created() {
    //   this.initRoutes()
    // },
    // methods: {
    //   initRoutes() {
    //     console.error('----this.breadcrumb', this.breadcrumb)
    //     console.error('----this.breadcrumbPush', this.breadcrumbPush)
    //     console.error('this.breadcrumbPush====>  ', this.breadcrumbSplice)
    //     if (!this.breadcrumb) {
    //       // .filter(route => route.meta.title !== '首页')
    //       this.routes = this.$route.matched.concat().map(function(route) {
    //         return {
    //           path: route.path,
    //           breadcrumbName: route.meta.title
    //         }
    //       })
    //       this.routes.push(...this.breadcrumbPush)
    //       if (this.breadcrumbSplice.length) {
    //         // this.routes.splice(...this.breadcrumbSplice);
    //       }
    //     }
    //   }
    // }
  })
</script>

<style lang="less" scoped> 
  @import url('@/assets/style/var.less');
  .ant-breadcrumb {
    display: flex;
    align-items: center;
  }
  :deep(.ant-breadcrumb-link a) {
    font-size: 14px;
    font-weight: 600;
    color: @text-color;
  }
  :deep(.ant-breadcrumb-separator) {
    color: @text-color-4;
  }
  :deep(.ant-breadcrumb-link span) {
    font-size: 14px;
    font-weight: 400;
    color: @text-color;
  }
  :deep(.ant-breadcrumb-separator) {
    margin: 0 12px;
  }
  .ant-breadcrumb .anticon {
    color: #6C727F;
    margin: 0 -6px !important;
    font-size: 12px;
  }
  .m-page-header {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 12px 14px;
    border-radius: 12px;
  }
</style>
